<template>
    <div v-loading="loading" style="width: 100%;word-break: break-all;">
        <SavePage title="新增单价详情">
            <template slot="body">
                <TitleTips title="基础信息" />
                <el-form size="medium" label-width="120px">
                    <el-row :gutter="24">
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="申报编号：">
                                <span>{{ form.declarationCode }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="申请日期：">
                                <span>{{ form.applyDate }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="审批通过日期：">
                                <span>{{ form.approvalDate || '--' }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="12" :lg="12">
                            <el-form-item label="申报依据：">
                                <span>{{ form.declarationBasis }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

                <TitleTips title="工程量清单"></TitleTips>
                <BaseTable :columns="columns1" :data="tableList1"></BaseTable>

                <TitleTips title="计日工清单" style="margin-top: 24px;"></TitleTips>
                <BaseTable :columns="columns2" :data="tableList2"></BaseTable>

                <TitleTips title="附件资料" style="margin-top: 24px;" />
                <FileListPreview style="margin-left: 20px;" :files="filesUrl" />
            </template>
        </SavePage>
    </div>
</template>

<script>
import { ContractPriceModel } from '@/models'
import FileListPreview from '@/components/FileListPreview'

export default {
    name: 'ContractUnitPriceDetail',
    components: {
        FileListPreview
    },
    data() {
        return {
            loading: true,
            model: new ContractPriceModel(),
            form: {
                declarationCode: '',
                applyDate: '',
                approvalDate: '',
                declarationBasis: '',
            },
            filesUrl: [],
            tableList1: [],
            tableList2: [],
            columns1: Object.freeze([
                {
                    attrs: {
                        prop: 'number',
                        label: '序号',
                        width: '70',
                        type: 'index'
                    }
                },
                {
                    attrs: {
                        prop: 'chapterSequenceName',
                        label: '章次',
                        width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'parentCode',
                        label: '上级清单子目编码',
                        width: '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'parentName',
                        label: '上级清单子目名称',
                        width: '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'listSubitemCode',
                        label: '清单子目编码',
                        width: '180',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'listSubitemName',
                        label: '清单子目名称',
                        width: '180',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'unitSymbol',
                        label: '单位',
                        width: '90',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'quantity',
                        label: '暂估数量',
                        width: '100',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'price',
                        label: '单价（元）',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'amount',
                        label: '合价（元）',
                        width: '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'remark',
                        label: '备注',
                        'min-width': '150',
                        'show-overflow-tooltip': true
                    }
                }
            ]),
            columns2: Object.freeze([
                {
                    attrs: {
                        prop: 'number',
                        label: '序号',
                        width: '70',
                        type: 'index'
                    }
                },
                {
                    attrs: {
                        prop: 'chapterSequenceName',
                        label: '分类',
                        width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'parentCode',
                        label: '上级清单子目编码',
                        width: '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'parentName',
                        label: '上级清单子目名称',
                        width: '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'listSubitemCode',
                        label: '清单子目编码',
                        width: '180',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'listSubitemName',
                        label: '清单子目名称',
                        width: '180',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'unitSymbol',
                        label: '单位',
                        width: '90',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'quantity',
                        label: '暂估数量',
                        width: '100',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'price',
                        label: '单价（元）',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'amount',
                        label: '合价（元）',
                        width: '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'remark',
                        label: '备注',
                        'min-width': '150',
                        'show-overflow-tooltip': true
                    }
                }
            ])
        }
    },
    created() {
        this.getDetail()
    },
    methods: {
        // 获取编辑时需要的详情数据
        getDetail() {
            this.model.projectDetail({ id: this.$route.query.id }).then(res => {
                this.form = (res.base) || {}
                this.filesUrl = this.form.filesUrl ? JSON.parse(this.form.filesUrl) : []
                this.tableList1 = res.billList || []
                this.tableList2 = res.dayWorkList || []
            }).finally(() => {
                this.loading = false
            })
        },
    }
}
</script>

<style lang="scss" scoped>
</style>
